<template>
  <div id="app">
      <div class="menu">
        <div class="menu-bg" v-show="$store.state.isNavShow">
            <div class="contain">
              <common-nav :imgHeight="imgHeight" :activeName="num"></common-nav>
            </div>
        </div>
      </div>
      <div v-bind:class="{'main-body': $store.state.isNavShow}">
        <router-view  @setNav="setNavigationNum" />
      </div>
      
      <div class="fixed">
        <div class="fixed-box">
          <common-right-fixed></common-right-fixed>
        </div>
    </div>

  </div>
</template>

<script>
import CommonRightFixed from "@/views/common/RightFixed";
import CommonNav from "@/views/common/Nav";

export default {
  name: 'App',
  components: {
      CommonRightFixed,
      CommonNav
  },
  data: function() {
    return {
      imgHeight: 60,
      num: '/home'
    }
  },
  methods: {
    setNavigationNum: function(val) {
	    this.num = val;
    }
  },
  computed: {
    
  }
}
</script>

<style lang="scss" scoped="" type="text/css">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  .menu{
    width: 100%;
    position: fixed;
    z-index: 99;
    background-color: #fff
  }
  .main-body{
    padding-top:60px;
  }
}
.swiper-wrapper {
  margin: 0 auto;
  .swiperImg {
    width: 100%;
    vertical-align: top;
  }
}
.fixed{
    position: absolute;
    top: 0;
    right: 100px;
    height: 100%;
    align-items: center; /*垂直居中*/
    justify-content: center;  /*左右居中*/
    flex-wrap: wrap;    
    flex-direction: column; /*决定主轴的方向 row(默认)|row-reverse|column|column-reverse*/
  .fixed-box{
    position: fixed;
    display: flex;
    width: 100px; 
    height: 100%;
    justify-content: center;
    align-items: center;
  }
}
</style>
